@tailwind base;
@tailwind components;
@tailwind utilities;
path {
    fill: inherit !important
}

/* 默认浅色模式 */
:root {
    --overlay-color: rgba(0, 0, 0, 0.5);

    --color-background: #F5F7FA; /* 主背景色 */
    --color-surface: #FFFFFF; /* 表面色 */
    --color-border: #DDE2E8; /* 边框色 */
    --color-text: #1A1A1A; /* 主文字色 */
    --color-muted: #a6aab1; /* 次文字色 */

    --color-primary: #3A7AFE; /* 主色 */
    --color-primary-hover: #2A62D9; /* 主色悬停 */

    --color-secondary: #5AC8FA; /* 辅助色 */
    --color-secondary-hover: #47B2E4; /* 辅助色悬停 */

    --color-success: #34C759; /* 成功 */
    --color-success-hover: #28A745; /* 成功悬停 */

    --color-warning: #FFCC00; /* 警告 */
    --color-warning-hover: #E6B800; /* 警告悬停 */

    --color-danger: #FF453A; /* 错误 */
    --color-danger-hover: #C93A30; /* 错误悬停 */

    --color-info: #909399; /* 信息 */
    --color-info-hover: #b1b3b8; /* 信息悬停 */

    --color-menu-hover: #E3E8F0; /* 菜单 hover 背景色（浅蓝灰色，略深于背景色 */
    --color-select-hover: #E3E8F0; /* 下拉 hover 背景色（浅蓝灰色，略深于背景色 */

    --color-pagination: #E3E8F0; /* 分页背景色 */
    --color-pagination-hover: #D9DEE7; /* 分页 hover 背景色 */

    --color-table-header: #D6E7FF; /*table 标题头色*/
    --color-table-row-hover: #D6E7FF; /*table 行 hover 背景色*/
    --color-table-striped: #DDE2E8; /*table 奇数行背景色*/
}

/* 深色模式 */
:root[dark] {
    --overlay-color: rgba(0, 0, 0, 0.5);
    --color-background: #1F2933; /* 深色模式：主背景 */
    --color-surface: #FFFFFF; /* 表面色 */
    --color-border: #DDE2E8; /* 边框色 */
    --color-text: #1A1A1A; /* 主文字色 */
    --color-muted: #6B7280; /* 次文字色 */

    --color-primary: #3A7AFE; /* 主色 */
    --color-primary-hover: #2A62D9; /* 主色悬停 */

    --color-secondary: #5AC8FA; /* 辅助色 */
    --color-secondary-hover: #47B2E4; /* 辅助色悬停 */

    --color-success: #34C759; /* 成功 */
    --color-success-hover: #28A745; /* 成功悬停 */

    --color-warning: #FFCC00; /* 警告 */
    --color-warning-hover: #E6B800; /* 警告悬停 */

    --color-danger: #FF453A; /* 错误 */
    --color-danger-hover: #C93A30; /* 错误悬停 */

    --color-info: #909399; /* 信息 */
    --color-info-hover: #b1b3b8; /* 信息悬停 */

    --color-menu-hover: #E3E8F0; /* 菜单 hover 背景色（浅蓝灰色，略深于背景色 */
    --color-select-hover: #E3E8F0; /* 下拉 hover 背景色（浅蓝灰色，略深于背景色 */

    --color-pagination: #E3E8F0; /* 分页背景色 */
    --color-pagination-hover: #D9DEE7; /* 分页 hover 背景色 */

    --color-table-header: #D6E7FF; /*table 标题头色*/
    --color-table-row-hover: #D6E7FF; /*table 行 hover 背景色*/
    --color-table-striped: #DDE2E8; /*table 奇数行背景色*/
}

* {

}

#app {
    @apply h-full;
}

input {
    outline: none;
    @apply bg-background;
}

* {
    @apply box-border;
    @apply m-0;
    @apply p-0;
    @apply text-text;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


.bgc {
    @apply bg-background;
}

.form-input-control {
    @apply text-sm py-1.5 pl-3;
    outline: 0;
}

.form-input-control:hover {
    border-color: var(--color-border);
}

.form-input-control:focus {
    border-color: var(--color-primary) !important;
    outline: 0;
}

.form-input-control-error {
    border-color: var(--color-danger) !important;
    outline: 0;
}

.text-danger {
    @apply text-red-500;
    @apply text-xs;
}

.c-pr-4 {
    @apply pr-4;
}

.c-pt-4 {
    @apply pt-4;
}

html, body {
    @apply h-full;
    @apply overflow-y-auto;
    background-image: url("/background-light.svg");
}

body[login] {
    @apply bg-background;
    background-image: none;
}

.data-table {
    @apply box-border;
    @apply w-full;
    @apply table-fixed;
    @apply border-collapse;
    @apply relative;
    border-spacing: 0;
}

.data-table th, td {
    @apply box-border;
    @apply py-2;
    @apply px-2;
    @apply text-left;
    @apply overflow-hidden;
}

.data-table thead {
}

.data-table thead th {
    @apply box-border;
    @apply sticky;
    @apply top-0;
    @apply z-10;
    @apply bg-table-header;
}

.data-table tr:nth-child(even) {
    @apply bg-table-striped;
}

.data-table tr:hover {
    @apply bg-table-row-hover;
}
